<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="nickname">
                <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="手机号码" prop="mobilePhone">
                <el-input v-model="ruleForm.mobilePhone"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" required>
                <el-form-item prop="birthday" style="width: 200px;">
                    <el-date-picker type="date" placeholder="选择出生日期" v-model="ruleForm.birthday"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-select v-show="a" v-model="array[0]" style="width: 150px;" @change="newshitwo">
                    <el-option v-for="(item, index) in shen" :key="index" :label="item.district"
                        :value="item.district">{{ item.district }}</el-option>
                </el-select>
                <el-select v-show="b" v-model="array[1]" style="width: 150px;  margin-left: 20px;" @change="newqutwo">
                    <el-option v-for="(item, index) in shi" :key="index" :label="item.district" :value="item.district"
                        @change="newqu(item.aid)">{{ item.district }}</el-option>
                </el-select>
                <el-select v-show="c" v-model="array[2]" style="width: 150px; margin-left: 20px;">
                    <el-option v-for="(item, index) in qu" :key="index" :label="item.district" :value="item.district">{{
                        item.district }}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="DetailsAddress">
                <el-input v-model="DetailsAddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    name: 'CustomerCreate',
    data() {
        return {
            string: [],
            ruleForm: {
                UserID: 0,
                nickname: '',
                gender: 0,
                birthday: new Date(),
                mobilePhone: '',
                loginPwd: '',
                address: '',
            },
            array: [],
            DetailsAddress: '',
            shen: [],
            shi: [],
            qu: [],

            a: false,
            b: false,
            c: false,

            rules: {
                nickname: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                birthday: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                Phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在为11位数字', trigger: 'blur' }
                ],
            }
        }
    },
    props: {
        dialogVisible: Boolean,
        data: Object
    },
    methods: {
        newshen() {
            this.axios({
                method: 'get',
                url: 'Customer/Shen',
                params: {},
                data: {}
            }).then(res => {

                if (res.data.code > 0) {
                    this.a = true;
                    this.shen = res.data.data;
                    console.log('this.shen: ', this.shen);
                } else {
                    this.a = false;
                }
            })
                .catch(err => {
                    console.log('err: ', err);
                })
        },
        newshi() {
            this.shi = [];

            this.axios({
                method: 'get',
                url: 'Customer/ShiQu',
                params: { name: this.array[0] },
                data: {}
            }).then(res => {
                if (res.data.code > 0) {
                    this.b = true;
                    this.shi = res.data.data;
                } else {
                    this.b = false;
                }
            })
                .catch(err => {
                    console.log('err: ', err);
                })

        },
        newqu() {
            this.qu = [];

            this.axios({
                method: 'get',
                url: 'Customer/ShiQu',
                params: { name: this.array[1] },
                data: {}
            }).then(res => {
                if (res.data.code > 0) {
                    this.c = true;
                    this.qu = res.data.data;
                } else {
                    this.c = false;
                }
            })
                .catch(err => {
                    console.log('err: ', err);
                })

        },
        newshitwo() {
            this.shi = [];

            this.array[1] = null;
            this.array[2] = null;

            this.axios({
                method: 'get',
                url: 'Customer/ShiQu',
                params: { name: this.array[0] },
                data: {}
            }).then(res => {
                if (res.data.code > 0) {
                    this.b = true;
                    this.shi = res.data.data;
                } else {
                    this.b = false;
                }
            })
                .catch(err => {
                    console.log('err: ', err);
                })

        },
        newqutwo() {
            this.qu = [];
            this.array[2] = null;

            this.axios({
                method: 'get',
                url: 'Customer/ShiQu',
                params: { name: this.array[1] },
                data: {}
            }).then(res => {
                if (res.data.code > 0) {
                    this.c = true;
                    this.qu = res.data.data;
                } else {
                    this.c = false;
                }
            })
                .catch(err => {
                    console.log('err: ', err);
                })

        },
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //axios 提交
                    //this.ruleForm
                    console.log('this.ruleForm: ', this.ruleForm);
                    this.ruleForm.address = "";
                    this.array.forEach((v, i) => {
                        this.ruleForm.address += v + ","
                    });

                    this.ruleForm.address += this.DetailsAddress;

                    this.axios({
                        method: 'put',
                        url: 'Customer',
                        params: {},
                        data: this.ruleForm
                    }).then(res => {
                        console.log('res: ', res);
                        if (res.data.code > 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            ///* 改变父窗口的值来关闭弹窗 */
                            this.$emit('update:dialogVisible', false);
                            // 触发刷新
                            this.$emit('refresh')

                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })
                        }
                    })
                        .catch(err => {
                            console.log('err: ', err);

                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    watch: {
        dialogVisible(v) {
            if (v) {
                this.newshen();
                this.ruleForm = JSON.parse(JSON.stringify(this.data));
                this.string = this.ruleForm.address.split(",");


                this.string.forEach((v, i) => {
                    if (this.string.length === 4) {
                        if (i === 3) {
                            this.DetailsAddress = v;
                        } else {

                            if (i === 0) {
                                this.newshen();
                                this.array[i] = v;
                            }
                            if (i === 1) {
                                this.newshi(this.array[i - 1]);
                                this.array[i] = v;
                            }

                            if (i === 2) {
                                this.newqu(this.array[i - 1]);
                                this.array[i] = v;

                            }
                        }

                    } else {
                        if (i === 2) {
                            this.DetailsAddress = v;
                        } else {
                            if (i === 0) {
                                this.newshen();
                                this.array[i] = v;
                            }
                            if (i === 1) {
                                this.newshi(this.array[i - 1]);
                                this.array[i] = v;
                            }
                        }
                    }
                });



                this.ruleForm.birthday = new Date(this.ruleForm.birthday);
                console.log('this.data: ', this.data);
                console.log('this.ruleForm: ', this.ruleForm);
            }
        }
    },
    created() {
        this.ruleForm = JSON.parse(JSON.stringify(this.data));
        this.ruleForm.birthday = new Date(this.ruleForm.birthday);
        this.string = this.ruleForm.address.split(",");

        console.log(this.string);


        this.string.forEach((v, i) => {
            if (this.string.length === 4) {
                if (i === 3) {
                    this.DetailsAddress = v;
                } else {

                    if (i === 0) {
                        this.newshen();
                        this.array[i] = v;
                    }
                    if (i === 1) {
                        this.newshi(this.array[i - 1]);
                        this.array[i] = v;
                    }

                    if (i === 2) {
                        this.newqu(this.array[i - 1]);
                        this.array[i] = v;

                    }
                }

            } else {
                if (i === 2) {
                    this.DetailsAddress = v;
                } else {

                    if (i === 0) {
                        this.newshen();
                        this.array[i] = v;
                    }
                    if (i === 1) {
                        this.newshi(this.array[i - 1]);
                        this.array[i] = v;
                    }
                }
            }
        });

        console.log(this.array);

        this.newshi(this.array[0]);
        console.log('this.ruleForm: ', this.ruleForm);

    }
}
</script>

<style scoped></style>